<template>
	<view class="arrowOuter">
		<view class="arrow" :style="`
		border: ${white}px solid ${color};
		border-top: ${white}px solid transparent;
		border-left: ${white}px solid transparent;
		border-bottom: ${white}px solid transparent;
		transform: rotate(${spin}deg);
		margin-bottom: ${marbottom}px;`">
		</view>
		<!-- <canvas class="myCanvas" ref="myCanvas" canvas-id="myCanvas"></canvas> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},

		/* onLoad() {
			this.drowArrow()
		}, */

		mounted() {
			/* 			var ctx = uni.createCanvasContext('CanvasCon', this)
						ctx.setFillStyle('rgba(255, 255, 255, 1)'); // 背景透明色
						let canvaswidth = 30; //设置画布宽度，30为字体大小
						let canvasheight = 30; //设置画布高度
						ctx.fillRect(0, 0, canvaswidth, canvasheight)

						ctx.setFillStyle('#e31d1a') // 颜色 */

		},


		props: {
			white: {
				type: Number,
				default: 6
			},
			color: {
				type: String,
				default: '#000'
			},
			spin: {
				type: Number,
				default: 0
			},
			marbottom: {
				type: Number,
				default: 0
			},
		},

		methods: {
			drowArrow() {
				let ctx = uni.createCanvasContext('myCanvas', that);
				ctx.beginPath()

				ctx.moveTo(5, 0);
				ctx.lineTo(10, 0);
				ctx.lineTo(10, 10);
				ctx.lineTo(5, 0);

				ctx.stroke();
				ctx.closePath()
			},
		}


	}
</script>

<style lang="scss" scoped>
	.arrow {
		width: 0;
		height: 0;
		border-top-width: 0;
		border-bottom-width: 0;
		border-bottom-width: 0;
	}

	.myCanvas {
		width: 100px;
		height: 100px;
		border: 1px solid red;
	}
</style>
